<template>
  <div v-if="messageList" class="message-main">
    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <div slot="header" class="clearfix">
        <div style="display: flex; align-items: center;">
          <span style="font-size: 16px; font-weight: 600;">订单信息:</span>
          <el-tag v-if="messageList.status==0" class="tab" size="small" type="danger" effect="dark">待处理</el-tag>
          <el-tag v-else-if="messageList.status==1" class="tab" size="small" type="warning" effect="dark">退货中</el-tag>
          <el-tag v-else-if="messageList.status==2" class="tab" size="small" type="success" effect="dark">已完成</el-tag>
          <el-tag v-else-if="messageList.status==3" class="tab" size="small" type="info" effect="dark">已拒绝</el-tag>
        </div>
        <el-row :gutter="20" style="font-size: 14px; margin-top: 20px; display: flex; align-items: center;">
          <el-col :span="7">
            <div>订单编号: {{ messageList.orderSn }}
              <el-button style="margin-left: 15px;" type="text" @click="goCheckOrde(messageList.orderId)">查看订单详情</el-button>
            </div></el-col>
          <el-col :span="5"><div>退单人姓名: {{ messageList.returnName }}</div></el-col>
          <el-col :span="6"><div>退单理由: {{ messageList.reason }}</div></el-col>
          <el-col :span="5"><div>退单描述: {{ messageList.description }}</div></el-col>
        </el-row>
        <el-row :gutter="20" style="font-size: 14px; margin-top: 20px;">
          <el-col :span="6"><div>申请时间: {{ messageList.createTime }}</div></el-col>
        </el-row>
      </div>

      <div style="font-size: 16px; font-weight: 600; margin-bottom: 25px;">退货商品:</div>

      <template>
        <el-table
          :data="messageList1"
          border
          style="width: 100%"
        >
          <el-table-column
            label="商品图片"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-image :src="scope.row.productPic" fit="fill" style="width: 100px;" />
            </template>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品描述"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="商品价格"
            width="100"
            align="center"
          />
          <el-table-column
            prop="productAttr"
            width="200"
            label="商品属性"
            align="center"
            :formatter="getProductFormatter"
          />
          <el-table-column
            prop="productCount"
            label="商品数量"
            width="100"
            align="center"
          />
          <el-table-column
            prop="returnAmount"
            label="总计"
            width="100"
            align="center"
          />
        </el-table>
      </template>

      <div style="font-size: 16px; font-weight: 600; margin: 25px 0;">用户信息:</div>
      <el-row :gutter="20" style="font-size: 14px; margin-top: 20px; margin-bottom: 60px;">
        <el-col :span="6"><div>联系人: {{ messageList.returnName }}</div></el-col>
        <el-col :span="6"><div>联系电话: {{ messageList.returnPhone }}</div></el-col>
      </el-row>
      <el-divider />

      <div style="font-size: 16px; font-weight: 600; margin: 25px 0;">费用信息:</div>
      <el-row v-if="messageList.status!==3" :gutter="20" style="font-size: 14px; margin-top: 20px; margin-bottom: 60px;">
        <el-col :span="6">退单金额: <span style="color: #f00;">{{ messageList.productPrice }}</span></el-col>
        <el-col :span="6">运费金额: <span style="color: #f00;">0</span></el-col>
      </el-row>

      <el-form v-if="messageList.status!==3" ref="goodsform" :model="goods" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="退单金额">
              <el-input-number v-model="goods.returnAmount" style="width: 100%;" :min="0" :step="100" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="处理人">
              <el-input v-model="goods.handleMan" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="处理备注">
              <el-input v-model="goods.handleNote" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="text-align: center; margin-top: 50px;">
          <el-button type="primary" style="width: 130px; height: 35px;" @click="getAgreePrice">同意退款</el-button>
          <el-button type="warning" style="width: 130px; height: 35px;">拒绝退款</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { orderReturn, agreeApply } from '@/api/orderReturn'

export default {
  name: 'MessagePage',
  filters: {
    jsonStr(value) {
      const arr = JSON.parse(value)
      return arr
    }
  },

  data() {
    return {
      returnId: null,
      messageList: [],
      messageList1: [],
      goods: {}
    }
  },
  watch: {
    goods: {
      handler(newValue) {
        this.goods.returnAmount = String(this.goods.returnAmount)
      },
      deep: true
    }
  },
  created() {
    this.returnId = this.$route.params.id
  },

  mounted() {
    this.getReturnOrderMessage()
  },
  methods: {
    // 同意退款
    async getAgreePrice() {
      this.$confirm('是否同意退货', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.goods.id = this.messageList.id
        const res = await agreeApply(this.messageList.id, this.goods)
        const { success, message } = res
        if (success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message.error(message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 前往详情页
    async goCheckOrde(id) {
      console.log(id)
      this.$router.push({ name: 'DetailPage', params: { id }})
    },
    // 获取订单信息
    async getReturnOrderMessage() {
      const res = await orderReturn(this.returnId)
      this.messageList1.push(res.data.orderReturnApply)
      this.messageList = res.data.orderReturnApply
      console.log(this.messageList)
    },
    getProductFormatter(row) {
      const arr = JSON.parse(row.productAttr)
      const arrAsArray = Array.from(arr)
      const filterArr = arrAsArray.map(({ key, value }) => `${key}:${value}`).join(',')
      return filterArr
    }
  }
}
</script>

<style lang="scss" scoped>
.tab{
  margin-left: 20px;

}
</style>
